<template>
	<div :id="id" class="box">
		<div class="pine"></div>
		<div class="box-wrap">
			<div class="box-wrap-title">{{ title }}</div>
			<div class="box-wrap-content">
				<div class="box-wrap-content-message">
					<!-- <a-image-preview-group> -->
					<swiper
						slidesPerView="1"
						:modules="modules"
						:navigation="navigation"
						:pagination="{ clickable: true }"
						observer
						loop
					>
						<swiper-slide v-for="num in 3" :key="num">
							<a-image :src="aaaa" />
						</swiper-slide>
					</swiper>
					<!-- </a-image-preview-group> -->
					<p>
						党总支委由局机关党支部、监督指挥中心党支部、城乡规划建设监察大队党支部、环卫所党支部等四个党支部组成。党总支委由局机关党支部、
					</p>
				</div>
				<div class="box-wrap-content-skip">
					<div @click="openFlow">流动党员</div>
					<div @click="handelSkip">进入全景</div>
				</div>
				<img @click="playMp3" class="mp3" src="../../../assets/mp3.png" />
			</div>
		</div>
		<audio ref="audioRef"></audio>
	</div>
</template>

<script setup>
import { defineProps, getCurrentInstance, ref, onMounted } from 'vue';
import router from '@/router/index';
import uDialogModal from '../../../components/listDialog/listDialog';
import { getImageUrl } from '../../../utils/base';
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Navigation, Pagination, A11y } from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import aaaa from '../../../assets/aaaa.png';
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Pagination, Navigation, A11y];
const navigation = ref({
	nextEl: '.button-next',
	prevEl: '.button-prev'
});
const { proxy } = getCurrentInstance();
const audioRef = ref(null);
onMounted(() => {
	audioRef.value.src = getImageUrl('video/djmap.mp3');
});
defineProps({
	title: {
		type: String,
		default: '标题'
	},
	id: {
		type: String,
		default: '001'
	},
	state: {
		type: String,
		default: '001'
	}
});
function closeClick() {
	if (this.closeEvent) {
		this.closeEvent();
	}
}
function playMp3() {
	if (audioRef.value.paused) {
		audioRef.value.play(); //audio.play();// 这个就是播放
	} else {
		audioRef.value.pause(); // 这个就是暂停
	}
}
function handelSkip() {
	router.push('/photoSphere');
}
function openFlow() {
	proxy.$el.remove();
	setTimeout(() => {
		uDialogModal()
			.then(() => {
				console.log('成功逻辑');
			})
			.catch(err => {
				console.log('失败逻辑');
			});
	}, 0);
}
</script>

<style lang="scss" scoped>
.box {
	width: 350px;

	position: absolute;
	bottom: 0;
	left: 0;
	animation: all 1s;
}

.close {
	position: absolute;
	color: #fff;
	top: 1px;
	right: 10px;
	text-shadow: 2px 2px 2px #022122;
	cursor: pointer;
	//animation: fontColor 1s;
}

.box-wrap {
	position: absolute;
	left: 40%;
	top: 0;
	width: 100%;

	animation: area 1s;
	border: 1px solid #d5c7a6;
	background-color: #60151a;

	.box-wrap-title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #d5c7a6;
		background-image: url('../../../assets/dTitle.png');
	}

	.box-wrap-content {
		padding: 20px;
		color: #ffffff;

		.box-wrap-content-message {
		}

		.box-wrap-content-skip {
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			margin-top: 20px;

			div {
				width: 131px;
				height: 37px;
				line-height: 37px;
				text-align: center;
				background: #fff6d1;
				border: 1px solid #ffc955;
				border-radius: 6px;
				color: #631f25;
			}
		}
	}
}
::v-deep .ant-image-mask {
	display: none;
}
::v-deep .ant-image {
	width: 100%;
	height: 160px;
	margin-bottom: 10px;
}

// .box-wrap .area {
// 	position: absolute;
// 	top: 20px;
// 	right: 0;
// 	width: 95%;
// 	height: 30px;
// 	background-image: linear-gradient(to left, #60151a, #d5c7a6);
// 	border-radius: 30px 0px 0px 0px;
// 	animation: area 1s;
// }

.mp3 {
	position: absolute;
	top: 55px;
	left: 30px;
	z-index: 11;
}

.pine {
	position: absolute;

	width: 100px;
	height: 100px;
	box-sizing: border-box;
	color: #60151a;
	line-height: 120px;
	text-indent: 5px;
}

.pine::before {
	content: '';
	position: absolute;
	left: 100px;
	bottom: -110px;
	width: 40%;
	height: 60px;
	box-sizing: border-box;
	border-bottom: 1px solid #60151a;
	transform-origin: bottom center;
	transform: rotateZ(135deg) scale(1.5);
	animation: slash 0.5s;
	filter: drop-shadow(1px 0px 2px #60151a);
	/* transition: slash 2s; */
}

.area .area-title {
	text-align: center;
	line-height: 30px;
}

.textColor {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	text-shadow: 1px 1px 5px #002520d2;
	animation: fontColor 1s;
}

.yellowColor {
	font-size: 14px;
	font-weight: 600;
	color: #f09e28;
	text-shadow: 1px 1px 5px #002520d2;
	animation: fontColor 1s;
}

.fontColor {
	font-size: 16px;
	font-weight: 800;
	color: #ffffff;
	text-shadow: 1px 1px 5px #002520d2;
	animation: fontColor 1s;
}

.content {
	padding: 55px 10px 10px 10px;
}

.content .data-li {
	display: flex;
}

@keyframes fontColor {
	0% {
		color: #ffffff00;
		text-shadow: 1px 1px 5px #00252000;
	}

	40% {
		color: #ffffff00;
		text-shadow: 1px 1px 5px #00252000;
	}

	100% {
		color: #ffffff;
		text-shadow: 1px 1px 5px #002520d2;
	}
}

@keyframes slide {
	0% {
		border: 1px solid #38e1ff00;
		background-color: #38e1ff00;
		box-shadow: 0 0 10px 2px #29baf100;
	}

	100% {
		border: 1px solid #d5c7a6;
		background-color: #60151a;
		box-shadow: 0 0 10px 2px #ffe990;
	}
}

@keyframes area {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

/* img{
            position:absolute;
            left:30%;
            top:0;
            width: 100%;
            box-shadow: 0 0 10px 2px #29baf1;
        } */

@keyframes slash {
	0% {
		transform: rotateZ(135deg) scale(0);
	}

	100% {
		transform: rotateZ(135deg) scale(1.5);
	}
}
</style>
